<template>
    <div class="rect-good">
        <my-image class="my-img" :imgUrl="soursePath+goodItem.icon"></my-image>
        <div class="content">
            <div class="content-top">
                <div class="good-name">{{goodItem.gname}}</div>
            </div>
            <div v-if="goodItem.price!=0" class="content-down"><span class="symbol">&yen;</span>{{(goodItem.price*goodItem.discount).toFixed(2)}}<span v-if="parseInt(goodItem.discount)!=1" class="old-price">{{parseInt(goodItem.price)}}元</span></div>
            <div v-else class="content-down">门店价</div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import myImage from "../../lazyloadImg/lazyImage.vue";

export default {
  name: "rect-good-item",
  data() {
    return {};
  },
  props: {
    goodItem: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  components: { myImage },
  mounted() {
  },
  computed: {
    ...mapState(["openid", "soursePath"])
  },
  methods: {}
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.rect-good {
    width: 100%;

    .my-img {
        width: 1.4rem;
        height: 1.4rem;
        background-color: #dedede;
    }

    .content {
        height: 0.52rem;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 0 0.05rem;

        .content-top {
            margin-top: 0.04rem;
            width: 100%;
            min-height: 0.2rem;

            .good-name {
                font-size: 0.12rem;
                color: #333;
                word-wrap: break-word;
                word-break: break-all;
                line-height .14rem;
            }
        }

        .content-down {
            font-size: 0.15rem;
            color: #ff65a8;

            .symbol {
                font-size: 0.13rem;
                margin-left 0.01rem;
            }

            .old-price{
                color #999;
                font-size .12rem;
                margin-left .07rem;
                text-decoration: line-through;
            }
        }
    }
}
</style>
